<template>
	<view class="addAddress">
		<view class="header">
			<image @tap = "backAddress" src="../../../../assets/images/arr-l.png" mode=""></image>
			<text>新增地址</text>	
		</view>
		<view class="name">
			<view class="left">
				收件人
			</view>
			<view class="right">
				<input v-model = "name" type="text" placeholder="请输入收件人姓名" />
			</view>
		</view>
		
		<view class="name">
			<view class="left">
				电话号码
			</view>
			<view class="right">
				<input  v-model = "tel" type="text" placeholder="请输入收件人电话号码" />
			</view>
		</view>	
		
			<view class="name">
				<view class="left" @click="showSinglePicker">
					所在地区
				</view>
				<view class="right">
					<!-- <pickers @address="address" @close="close" :defaultAddress="defaultAddress"></pickers> -->
					<text>{{label}}</text>
				</view>
			</view>
			
			<view class="name">
				<view class="left">
					详细地址
				</view>
				<view class="right">
					<input v-model = "cityBak" type="text" placeholder="请输入详细地址" />
				</view>
			</view>	
			
			<view class="footer" @tap = "address">
				保存地址
			</view>
			  <mpvue-city-picker 
			  :themeColor="themeColor" 
			  ref="mpvuePicker" 
			  :pickerValueDefault="cityPickerValueDefault"
			          @onCancel="onCancel" @onConfirm="onConfirm"></mpvue-city-picker>
	</view>
</template>

<script>
	
	import http from "../../../../utils/http.js"
	 import mpvuePicker from '@/components/mpvue-picker/mpvuePicker.vue';
	    // https://github.com/zhetengbiji/mpvue-citypicker
	    import mpvueCityPicker from '@/components/mpvue-citypicker/mpvueCityPicker.vue'
	    import cityData from '@/common/city.data.js';
	export default {
		components: {
		            mpvuePicker,
		            mpvueCityPicker
		        },
		data() {
			return {
				label:'',
				// codeL:0,
				Id:'',
				id:"",
				userInfo:"",
				tag:"家",
				cityCode:"",
				provinceStr:"",
				cityStr:'',
				areaStr:"",
				cityBak:'',
				tel:'',
				name:'',
				isUse:"0",
				region_arr:"",
				
				title : "mpvue-picker 使用示例",
				                pickerSingleArray: [{
				                        label: '中国',
				                        value: 1
				                    },
				                    {
				                        label: '俄罗斯',
				                        value: 2
				                    },
				                    {
				                        label: '美国',
				                        value: 3
				                    },
				                    {
				                        label: '日本',
				                        value: 4
				                    }
				                ],
				                mulLinkageTwoPicker: cityData,
				                cityPickerValueDefault: [0, 0, 1],
				                themeColor: '#007AFF',
				                pickerText: '',
				                mode: '',
				                deepLength: 1,
				                pickerValueDefault: [0],
				                pickerValueArray:[]
			};
		},
		
		methods:{
			backAddress(){
				uni.navigateTo({
					url:"../address/address"
				})
			},
			address(){
				if(this.Id == ""){
					http.post("/api/leju/front/address/save",{
						userId:this.id,
						tag:this.tag,
						cityCode:this.cityCode,
						name:this.name,
						tel:this.tel,
						cityStr:this.label	
					}).then(res=>{
						console.log(res);
						uni.showToast({
							title:"添加成功"
						})
						setTimeout(()=>{
							uni.navigateTo({
								url:"/pages/mine/address/address/address"
							})
						},2000)	
					})
				}else{
					http.post("/api/leju/front/address/update",{
						id:this.Id,
						userId:this.id,
						tag:this.tag,
						cityCode:this.cityCode,
						name:this.name,
						tel:this.tel,
						cityStr:this.label
					}).then(res =>{
						uni.showToast({
							title:"修改成功"
						})
						setTimeout(()=>{
							uni.navigateTo({
								url:"/pages/mine/address/address/address"
							})
						},2000)	
					})
				}
				this.userInfo = JSON.parse(uni.getStorageSync("token"));
				this.id = this.userInfo.id;
				// console.log("111");
				http.post("/api/leju/front/address/save",{
					userId:this.id,
					tag:this.tag,
					cityCode:this.cityCode,
					name:this.name,
					tel:this.tel,
					cityStr:this.label	
				}).then(res=>{
					console.log(res);
					uni.showToast({
						title:"添加成功"
					})
					setTimeout(()=>{
						uni.navigateTo({
							url:"/pages/mine/address/address/address"
						})
					},2000)	
				})
			},
			onCancel(e) {
			                console.log(e)
			            },
			            // 单列
			            showSinglePicker() {
			                this.pickerValueArray = this.pickerSingleArray
			                this.mode = 'selector'
			                this.deepLength = 1
			                this.pickerValueDefault = [0]
			                this.$refs.mpvuePicker.show()
			            },
			            // 二级联动选择
			            showMulLinkageTwoPicker() {
			                this.pickerValueArray = this.mulLinkageTwoPicker
			                this.mode = 'multiLinkageSelector'
			                this.deepLength = 2
			                this.pickerValueDefault = [0, 0]
			                this.$refs.mpvuePicker.show()
			            },
			            // 三级联动选择
			            showMulLinkageThreePicker() {
			                this.$refs.mpvueCityPicker.show()
			            },
			            onConfirm(e) {
			                this.pickerText = JSON.stringify(e)
							console.log(e);
							this.label = e.label;
							this.cityCode = e.cityCode;
							
							
			            }
		},
		onLoad(options){
			console.log(options)
			this.Id = options.id
		}
	}
</script>

<style lang="scss">
	.addAddress{
		width:750rpx;
		height: 100vh;
		background:wheat;
		.header{
			width:100%;
			height: 80rpx;
			background: #5D4E49;
			padding:0.1rpx;
			image{
				position:absolute;
				left:33rpx;
				top:28rpx;
				width:24px;
				height: 38rpx;
			}
			text{
				display:block;
				width:200rpx;
				height: 50rpx;
				line-height: 50rpx;
				text-align:center;
				font-weight:bolder;
				color:white;
				margin:0 auto;
				margin-top:20rpx;
				font-size:40rpx;
			}
		}
		.name{
			display:flex;
			justify-content: space-evenly;
			align-items:center;
			margin:20rpx 0;
		}
		.footer{
			position: fixed;
			bottom:40rpx;
			left:125rpx;
			width:500rpx;
			height: 80rpx;
			text-align:center;
			line-height: 80rpx;
			background-color: #5D4E49;
			color:white;
			font-weight:bolder;
			border-radius: 80rpx;
		}
		
	}
</style>
